<template>
	<div>
		<header class="header rank-header">
      <div class="header-nav">
        <span :class="{'active-nav': weekRankActive}" @click="changeNav(1)">周排行</span>
        <span :class="{'active-nav': !weekRankActive}" @click="changeNav(2)">月排行</span>
      </div>
    </header>	
    <div class="doctor-container">
      <div class="doctor" v-for="(doctor, index) in showList">
        <div class="doctor-rank">
          <p :class="{ 'redColor': [0, 1, 2].includes(index) }">{{ index + 1 }}</p>
        </div>
        <div class="doctor-img">
          <img :src="'/static/pt/' + doctor.imgUrl + '.png'" />
        </div>
        <div class="doctor-infor">
          <p>
            <span>{{doctor.name}}</span>
            <span>{{doctor.profession}}</span>
          </p>
          <div class="rank-line" :style="{ width: doctor.scale }"></div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <router-link :to="{path: 'tLogin'}">
        <div class="footer-nav">
          <img src="./../../assets/pt/recieve-order-1.png" />
          <p>接单</p>
        </div>
      </router-link>
      <div class="footer-nav acitive-footer-nav">
        <img src="./../../assets/pt/rank-list-1.png" />
        <p>排行榜</p>
      </div>
      <div class="footer-nav">
        <img src="./../../assets/pt/wo-1.png" />
        <p>我</p>
      </div>
    </footer>	
	</div>
</template>

<script>
export default {
  data() {
    return {
      weekList: [
        { imgUrl: "m1", name: "陆海娟", profession: "资深催乳师", scale: "90%" },
        { imgUrl: "m2", name: "莱卡", profession: "资深催乳师", scale: "85%" },
        { imgUrl: "m1", name: "刘炯思", profession: "资深催乳师", scale: "80%" },
        { imgUrl: "m2", name: "江东美", profession: "资深催乳师", scale: "66%" },
        { imgUrl: "m1", name: "李晓霞", profession: "金牌催乳师", scale: "50%" },
        { imgUrl: "m2", name: "戴茹", profession: "金牌催乳师", scale: "46%" },
        { imgUrl: "m1", name: "王婷", profession: "金牌催乳师", scale: "44%" },
        { imgUrl: "m2", name: "曲丝雨", profession: "金牌催乳师", scale: "30%" },
        { imgUrl: "m1", name: "吴海娇", profession: "金牌催乳师", scale: "22%" }
      ],
      monthList: [],
      showList: [],
      weekRankActive: true
    }
  },
  methods: {
    changeNav(orderBtnValue) {
      this.weekRankActive = orderBtnValue == 1 ? true : false
      this.showList = orderBtnValue == 1 ? this.weekList : this.monthList
		}
  },
  created() {
    this.showList = this.weekRankActive ? this.weekList : this.monthList
  }
}
</script>

<style>
.rank-header {
  display: flex;
  justify-content: center;
  font-size: 0.25rem;
}
.header {
  display: flex;
  align-items: center;
  padding: 0.25rem;
  background-color: #e87979;
}
.header-nav {
  display: inline-block;
  border: 0.02rem solid #f1afaf;
  border-radius: 0.1rem;
}
.active-nav {
  border-radius: 0.1rem;
  background-color: #fff;
}
.header-nav span {
  display: inline-block;
  padding: 0.2rem 0.25rem;
  font-size: 0.25rem;
  letter-spacing: 1px;
  cursor: pointer;
}
.doctor {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  margin-top: 0.2rem;
  font-size: 0.25rem;
  background-color: #fff;
}
.doctor-container {
  padding-bottom: 1.12rem;
}
.doctor-rank {
  flex: 1 1 5%;
}
.doctor-img {
  flex: 1 1 12%;
}
.doctor-img img {
  height: 0.66rem;
  width: 0.66rem;
  border-radius: 50%;
}
.doctor-infor {
  flex: 1 1 83%;
}
.doctor-infor span:first-child {
  display: inline-block;
  width: 0.88rem;
}
.rank-line {
  height: 0.1rem;
  margin-top: 0.1rem;
  border-radius: 0.05rem;
  background-color: #e87979;
}
.redColor {
  color: #e87979;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  background-color: #ffe5e4;
}
.footer a {
  display: block;
  flex: 1;
}
.footer-nav {
  flex: 1;
  padding: 0.12rem 0;
  color: #8d9292;
  text-align: center;
}
.acitive-footer-nav {
  color: #e87979;
}
.footer-nav p {
  font-size: 0.25rem;
  padding: 3px 0;
}
.footer-nav img {
  width: 0.35rem;
  height: 0.42rem;
}
</style>
